<template>
  <section>
    <div class="title" style="font-size: 16px; font-weight: 600">重点区域</div>
    <a-divider style="margin: 4px 0 10px 0; background-color: #000" />

    <div class="pie-chart">
      <EChart ref="pieChartRef" height="160px" />
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { itratorObjectKeys } from '@/utils'

  interface Props {
    AreaEquipmentInfoData: Record<string, any>
  }

  const props = withDefaults(defineProps<Props>(), {
    AreaEquipmentInfoData: () => ({
      jianjiji: 1,
      minhang: 0,
      zhandouji: 0,
      zhenchaji: 0,
      minchuan: 0,
      junjian: 0,
      qianting: 0
    })
  })

  const dataMap = {
    jianjiji: '歼击机',
    minhang: '民航',
    zhandouji: '战斗机',
    zhenchaji: '侦察机',
    minchuan: '民船',
    junjian: '军舰',
    qianting: '潜艇'
  }

  const chartData = itratorObjectKeys(props.AreaEquipmentInfoData, dataMap)

  const pieChartRef = ref()

  const initPieChart = () => {
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        top: 'middle'
      },
      color: ['#005FD8', '#00F5FF', '#FF628B', '#FFD385'],
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['70%', '50%'],
          avoidLabelOverlap: false,
          label: {
            formatter: function (params) {
              return params.value
            },
            rich: {
              a: {
                fontSize: 14,
                color: '#000',
                fontWeight: 500,
                lineHeight: 32,
                align: 'right'
              }
            }
          },
          data: chartData
        }
      ]
    }

    pieChartRef.value.setData(option)
  }

  onMounted(() => {
    initPieChart()
  })
</script>

<style lang="less" scoped>
  section {
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 10px;
  }
</style>
